import React, { Component } from 'react';
import { Modal, Form, message, Row, Input } from 'antd';

const FormItem = Form.Item;

export default class DevBind extends Component {
  state = {};

  handleSet = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { dispatch, opType } = this.props;
        const { devUuid, remark, vehLicplateNo } = values;

        dispatch({
          type: 'devfix/devunbind',
          payload: { devUuid, remark, vehLicplateNo },
          callback: () => {
            message.success('设备解绑成功.');
          },
        });
        this.props.handleModalVisible(false, opType);
      }
    });
  };

  render() {
    const { modalVisible, form, handleModalVisible, opType, record } = this.props;
    return (
      <Modal
        title="设备解绑"
        visible={modalVisible}
        onOk={this.handleSet}
        onCancel={() => handleModalVisible(false, opType)}
      >
        <Form>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设备名称">
            {form.getFieldDecorator('devUuid', {
              initialValue: record.devUuid,
            })(<Input disabled />)}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="车牌号">
            {form.getFieldDecorator('vehLicplateNo', {
              initialValue: record.vehLicplateNo,
            })(<Input disabled />)}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注">
            {form.getFieldDecorator('remark', {
              rules: [{ required: true, message: '请输入备注...' }],
            })(<Input />)}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}
